<template>
  <div class="p-4">
    <BasicTable @register="registerTable" @edit-change="onEditChange">
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" />
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from "vue"
  import { BasicTable, useTable, TableAction, BasicColumn, ActionItem, EditRecordRow } from "/@/components/Table"
  import { optionsListApi } from "/@/api/demo/select"

  import { demoListApi } from "/@/api/demo/table"
  import { treeOptionsListApi } from "/@/api/demo/tree"
  import { cloneDeep } from "lodash-es"
  import { useMessage } from "/@/hooks/web/useMessage"

  const columns: BasicColumn[] = [
    {
      title: "输入框",
      dataIndex: "name",
      editRow: true,
      editComponentProps: {
        prefix: "$",
      },
      width: 150,
    },
    {
      title: "默认输入状态",
      dataIndex: "name7",
      editRow: true,
      width: 150,
    },
    {
      title: "输入框校验",
      dataIndex: "name1",
      editRow: true,
      align: "left",
      // 默认必填校验
      editRule: true,
      width: 150,
    },
    {
      title: "输入框函数校验",
      dataIndex: "name2",
      editRow: true,
      align: "right",
      editRule: async (text) => {
        if (text === "2") {
          return "不能输入该值"
        }
        return ""
      },
    },
    {
      title: "数字输入框",
      dataIndex: "id",
      editRow: true,
      editRule: true,
      editComponent: "InputNumber",
      width: 150,
    },
    {
      title: "下拉框",
      dataIndex: "name3",
      editRow: true,
      editComponent: "Select",
      editComponentProps: {
        options: [
          {
            label: "Option1",
            value: "1",
          },
          {
            label: "Option2",
            value: "2",
          },
          {
            label: "Option3",
            value: "3",
          },
        ],
      },
      width: 200,
    },
    {
      title: "远程下拉",
      dataIndex: "name4",
      editRow: true,
      editComponent: "ApiSelect",
      editComponentProps: {
        api: optionsListApi,
        resultField: "list",
        labelField: "name",
        valueField: "id",
      },
      width: 200,
    },
    {
      title: "远程下拉树",
      dataIndex: "name8",
      editRow: true,
      editComponent: "ApiTreeSelect",
      editRule: false,
      editComponentProps: {
        api: treeOptionsListApi,
        resultField: "list",
      },
      width: 200,
    },
    {
      title: "日期选择",
      dataIndex: "date",
      editRow: true,
      editComponent: "DatePicker",
      editComponentProps: {
        valueFormat: "YYYY-MM-DD",
        format: "YYYY-MM-DD",
      },
      width: 150,
    },
    {
      title: "时间选择",
      dataIndex: "time",
      editRow: true,
      editComponent: "TimePicker",
      editComponentProps: {
        valueFormat: "HH:mm",
        format: "HH:mm",
      },
      width: 100,
    },
    {
      title: "勾选框",
      dataIndex: "name5",
      editRow: true,

      editComponent: "Checkbox",
      editValueMap: (value) => {
        return value ? "是" : "否"
      },
      width: 100,
    },
    {
      title: "开关",
      dataIndex: "name6",
      editRow: true,
      editComponent: "Switch",
      editValueMap: (value) => {
        return value ? "开" : "关"
      },
      width: 100,
    },
  ]
  export default defineComponent({
    components: { BasicTable, TableAction },
    setup() {
      const { createMessage: msg } = useMessage()
      const currentEditKeyRef = ref("")
      const [registerTable] = useTable({
        title: "可编辑行示例",
        titleHelpMessage: ["本例中修改[数字输入框]这一列时，同一行的[远程下拉]列的当前编辑数据也会同步发生改变"],
        api: demoListApi,
        columns: columns,
        showIndexColumn: false,
        showTableSetting: true,
        tableSetting: { fullScreen: true },
        actionColumn: {
          width: 160,
          title: "Action",
          dataIndex: "action",
          slots: { customRender: "action" },
        },
      })

      function handleEdit(record: EditRecordRow) {
        currentEditKeyRef.value = record.key
        record.onEdit?.(true)
      }

      function handleCancel(record: EditRecordRow) {
        currentEditKeyRef.value = ""
        record.onEdit?.(false, false)
      }

      async function handleSave(record: EditRecordRow) {
        // 校验
        msg.loading({ content: "正在保存...", duration: 0, key: "saving" })
        const valid = await record.onValid?.()
        if (valid) {
          try {
            const data = cloneDeep(record.editValueRefs)
            console.log(data)
            //TODO 此处将数据提交给服务器保存
            // ...
            // 保存之后提交编辑状态
            const pass = await record.onEdit?.(false, true)
            if (pass) {
              currentEditKeyRef.value = ""
            }
            msg.success({ content: "数据已保存", key: "saving" })
          } catch (error) {
            msg.error({ content: "保存失败", key: "saving" })
          }
        } else {
          msg.error({ content: "请填写正确的数据", key: "saving" })
        }
      }

      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
        if (!record.editable) {
          return [
            {
              label: "编辑",
              disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
              onClick: handleEdit.bind(null, record),
            },
          ]
        }
        return [
          {
            label: "保存",
            onClick: handleSave.bind(null, record, column),
          },
          {
            label: "取消",
            popConfirm: {
              title: "是否取消编辑",
              confirm: handleCancel.bind(null, record, column),
            },
          },
        ]
      }

      function onEditChange({ column, value, record }) {
        // 本例
        if (column.dataIndex === "id") {
          record.editValueRefs.name4.value = `${value}`
        }
        console.log(column, value, record)
      }

      return {
        registerTable,
        handleEdit,
        createActions,
        onEditChange,
      }
    },
  })
</script>
